<!DOCTYPE html>
<title>media controls overlay play button document move</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script src="../media-controls.js"></script>
<script src="overlay-play-button.js"></script>
<body>
<script>
async_test(function(t) {
  // Make sure the overlay play button is turned on, as it's typically off
  // unless we're dealing with Android.
  enableOverlayPlayButtonForTest(t);

  var video = createAndMoveVideo();

  video.onloadedmetadata = t.step_func(function() {
    // Large-enough video should have an overlay play button.
    assertOverlayPlayButtonVisible(video);

    // If the width goes under the minimum, the button should be hidden.
    video.width = NARROW_VIDEO_WIDTH;
    runAfterLayoutAndPaint(t.step_func(function() {
      assertOverlayPlayButtonNotVisible(video);

      // Re-widening the video should display the button.
      video.width = NORMAL_VIDEO_WIDTH;
      runAfterLayoutAndPaint(t.step_func(function() {
        assertOverlayPlayButtonVisible(video);

        // If the height goes under the minimum, the button should be hidden.
        video.height = NARROW_VIDEO_HEIGHT;
        runAfterLayoutAndPaint(t.step_func(function() {
          assertOverlayPlayButtonNotVisible(video);

          // Re-heightening the video should display the button.
          video.height = NORMAL_VIDEO_HEIGHT;
          runAfterLayoutAndPaint(t.step_func_done(function() {
            assertOverlayPlayButtonVisible(video);
          }));
        }));
      }));
    }));
  });

  function createAndMoveVideo() {
    var doc = document.implementation.createHTMLDocument();
    var v = doc.createElement('video');
    v.src = '../content/test.ogv';
    v.width = NORMAL_VIDEO_WIDTH;
    v.height = NORMAL_VIDEO_HEIGHT;
    v.controls = true;
    doc.body.appendChild(v);
    doc.body.removeChild(v);
    document.body.appendChild(v);
    return v;
  }
});
</script>
</body>
